<template>
  <div>
    <template>
      <el-table
        ref="multipleTable"
        :data="productLists"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="编号" width="120" prop="id"> </el-table-column>
        <el-table-column label="商品图片" width="120">
          <template slot-scope="scope">
            <img
              :src="scope.row.pic"
              min-width="70"
              height="70"
              class="head_pic"
            />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="120">
          <template slot-scope="scope">
            <p>{{ scope.row.name }}</p>
            <p>品牌：{{ scope.row.brandName }}</p>
          </template>
        </el-table-column>
        <el-table-column label="价格/货号" width="120">
          <template slot-scope="scope">
            <p>价格：${{ scope.row.price }}</p>
            <p>货号：{{ scope.row.productSn }}</p>
          </template>
        </el-table-column>
        <el-table-column label="标签" width="120">
          <template>
            <el-switch
              v-model="value"
              active-color="#409EFF"
              inactive-color="#C0CCDA"
              >>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="120" prop="sort">
        </el-table-column>
        <el-table-column label="sku库存" width="120">
          <template>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
          </template>
        </el-table-column>
        <el-table-column label="销量" width="120" prop="sale">
        </el-table-column>
        <el-table-column label="审核状态" width="120">
          <template>
            <p>未审核</p>
            <el-button type="text">审核详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template>
            <p>
              <el-button size="mini">查看</el-button>
              <el-button size="mini">编辑</el-button>
            </p>
            <p>
              <el-button size="mini">日志</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </p>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
import { fetchProductsLists } from "../../api/api";
export default {
  data() {
    return {
      value: true,
      productLists: [],
      multipleSelection: [],
      total: null,
      totalPage: null,

      pageSize: null,
      currentPage: 1,
    };
  },
  mounted() {
    fetchProductsLists().then((res) => {
      console.log(res);
      this.productLists = res.data.list;
      // console.log(this.productLists);
      this.total = res.data.total;
      this.totalPage = res.data.totalPage;
      this.pageSize = res.data.pageSize;
      console.log(this.total, this.totalPage);
    });
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //当改变每页显示条数的选择器时会触发的事件
    handleSizeChange(size) {
      // 每页显示的数量是我们选择器选中的值size
      this.pageSize = size;
      console.log(this.pageSize); //每页下拉显示数据
    },
    //当改变当前页数的时候触发的事件
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
  },
};
</script>

<style lang="scss" scoped>
.cell p {
  margin: 14px 0;
}
</style>
